<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
    <style>
      body {
        margin: 0;
      }
      .app {
        width: 100%;
        height: 100vh;
        background-color: aquamarine;
        /* step1 : 开启flex布局 */
        display: flex;
        /* step2 : 确定主轴方向 */
        flex-direction: column;
        /* step3: 调控主轴方向排列 */
        justify-content: start;
        /* step4: 纵轴方向 */
        align-items: stretch;
        
      }
      .header{
        height: 64px;
        background-color: burlywood;
        
      }
      .bodyer{
        min-height: 1px;
        /* height: 100px; */
        background-color: rgb(69, 32, 218);
        flex:1;
          /* step1 : 开启flex布局 */
        /* step2 : 确定主轴方向 */
        /* step3: 调控主轴方向排列 */
        /* step4: 纵轴方向 */
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: stretch;



      }
      .aside{
        width: 240px;
        /* height: 100px; */
        background-color: rgb(15, 15, 129);
        overflow: auto;
      }
      .main{
        /* width: 200px; */
        /* height: 200px; */
        background-color: rebeccapurple;
        flex: 1;
        font-size: 40px;
        overflow: auto;
      }
      .item{
        border: solid 3px red;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <div class="header"></div>
      <div class="bodyer">
        <div class="aside">
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">1111111</div>
          <div class="item">222222222</div>
          <div class="item">222222222</div>
          <div class="item">222222222</div>
          <div class="item">222222222</div>
          <div class="item">222222222</div>
          <div class="item">22222222233333333</div>
          <div class="item">222222222</div>
          <div class="item">222222222</div>
          <div class="item">222222222</div>
        </div>
        <div class="main">
          <div>xxxxxxxxx xxxxxxxx x    ddddddd</div>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <div>yyyyyyyyyyyy xxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx</div>
        </div>
      </div>
    </div>
  </body>
</html>
